<template>
<div class="content">
    <div class="info-box">
        <div class="steps-box">
            <el-steps :active="2" finish-status="success" align-center>
                <el-step title="基本信息"></el-step>
                <el-step title="品类/尺寸"></el-step>
                <el-step title="盒型"></el-step>
                <el-step title="色系"></el-step>
                <el-step title="包装体现"></el-step>
                <el-step title="工艺"></el-step>
            </el-steps>
        </div>
        

        <el-form ref="form" :model="prodictInfo" label-width="80px" :rules="regRules">
			 <el-form-item label="盒型">
				 <el-radio-group v-model="prodictInfo.type" @input="changeBoxType">
					 <el-radio v-for="(item, index) in boxTypeData" :key="index" :label="item.dictCode">
						 {{ item.dictLabel }}
					 </el-radio>
				 </el-radio-group>
			 </el-form-item>
			 <el-form-item :label="box">
				 <el-radio-group v-model="prodictInfo.boxType">
					 <el-radio v-for="(item,index) in subtypeData" :key="index" :label="item.dictLabel">
						 {{ item.dictLabel }}
						 <div class="video-box">
						     <video :src="basePath + item.imgPath" class="show-video" autoplay="true"></video>
						 </div>
					 </el-radio>
				 </el-radio-group>
			 </el-form-item>
            <!-- <el-form-item v-if="prodictInfo.type === '0'" label="天地盖" prop="boxType">
                <el-radio-group v-model="prodictInfo.boxType">
                    <el-radio v-for="(item,index) in subtypeData" :key="index" :label=item.dictValue>
                        {{item.dictLabel}}
                        <div class="video-box">
                            <video :src="basePath + item.imgPath" class="show-video" autoplay="true"></video>
                        </div>
                    </el-radio>
                </el-radio-group>
            </el-form-item> -->

           <!-- <el-form-item v-if="prodictInfo.type === '1'" label="一体形成" prop="boxType">
                <el-radio-group v-model="prodictInfo.boxType">
                    <el-radio v-for="(item,index) in subtypeData" :key="index" :label=item.dictValue>
                        {{item.dictLabel}}
                        <div class="video-box">
                            <video :src="basePath + item.imgPath" class="show-video" autoplay="true"></video>
                        </div>
                    </el-radio>
                </el-radio-group>
            </el-form-item> -->
        </el-form>
        <div class="button-box">
            <el-button type="primary" @click="nextStep">下一步</el-button>
        </div>
    </div> 
</div>
</template>

<script>
import {getDicts,getSubtypeDicts} from "@/api/design/dict/data"
export default {
    data() {
        return {
			box:"",
			productDictVo:{
				list:[],
				parentId:null
			},
            boxTypeData:[],
            subtypeData:[],
            prodictInfo:{},
            basePath:process.env.VUE_APP_BASE_API,
            regRules:{
                boxType:[
                    {required:true,message:'请选择盒型',trigger:'blur'}
                ],
            }
        }
    },
    methods: {
        changeBoxType(e){
			if(e==18){
				this.box="天地盖"
			}else if(e==19){
				this.box="一体形成"
			}
			this.productDictVo.list.push("box_type")
			this.productDictVo.parentId=e
			getDicts(this.productDictVo).then(res=>{		
				this.subtypeData = res.data
				console.log(this.subtypeData)
			})
        },
        nextStep(){

            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.$router.push(
                        {
                            path:'/color', 
                            query: {
                                userName: this.prodictInfo.userName,
                                sex:this.prodictInfo.sex,
                                age:this.prodictInfo.age,
                                solarFilm:this.prodictInfo.solarFilm,
                                solarFilmSize:this.prodictInfo.solarFilmSize,
                                colorChangeFilm:this.prodictInfo.colorChangeFilm,
                                colorChangeFilmSize:this.prodictInfo.colorChangeFilmSize,
                                lacquerFilm:this.prodictInfo.lacquerFilm,
                                lacquerFilmSize:this.prodictInfo.lacquerFilmSize,
                                boxType:this.prodictInfo.boxType,
                            }
                        }
                    )
                }
            })


            
        }
    },
    created() {
        this.prodictInfo.userName = this.$route.query.userName
        this.prodictInfo.sex = this.$route.query.sex
        this.prodictInfo.age = this.$route.query.age
        this.prodictInfo.solarFilm = this.$route.query.solarFilm
        this.prodictInfo.solarFilmSize = this.$route.query.solarFilmSize
        this.prodictInfo.colorChangeFilm = this.$route.query.colorChangeFilm
        this.prodictInfo.colorChangeFilmSize = this.$route.query.colorChangeFilmSize
        this.prodictInfo.lacquerFilm = this.$route.query.lacquerFilm
        this.prodictInfo.lacquerFilmSize = this.$route.query.lacquerFilmSize
		this.productDictVo.list.push("box_type")
		this.productDictVo.parentId=0
        getDicts(this.productDictVo).then(res => {
			this.boxTypeData=res.data
        })
    },
}
</script>

<style scoped>
.content{
    width: 100%;
    height: 100%;
    padding-top: 10px;
}
.info-box{
    margin-top: 20px;
}
.steps-box{
    margin-bottom: 50px;
}
::v-deep .el-step__title{
    font-size: 14px;
}
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.show-video{
    width: 100px;
    height: auto;
}
.button-box{
    display: flex;
    justify-content: center;
    margin-top: 10%;
}
</style>